<template>
    <div class="systemNotification-container">
        <div class="systemNotification-head">
            <span>系统通知</span>
        </div>
        <div class="systemNotification-body" v-for="item in systemNotificationList" :key="item.id">
            <div class="systemNotification-body-content">
                <span class="title">&nbsp;{{item.title}}</span>
                <span class="content">&nbsp;&nbsp;&nbsp;{{item.content}}</span><br>   
                <span class="time">&nbsp;{{item.time}}</span>
            </div>
        </div> 
    </div>
</template>

<script>
export default {
    data() {
        return {
            systemNotificationList: [
                {
                    title: "您的稿件已通过审核!",
                    content: "您的稿件《sky》（BV1eL411u7sq - 投稿序号：687659500）已经通过审核",
                    time: "2021年11月10日 21:00",
                },
                {
                    title: "您的稿件已通过审核!",
                    content: "您的稿件《sky》（BV1eL411u7sq - 投稿序号：687659500）已经通过审核",
                    time: "2021年11月10日 21:00",
                }
            ]
        }
    }
}
</script>

<style>
.systemNotification-head {
    margin-top: 10px;
    margin-left:205px;
    width: 800px;
    height:30px;
    background-color:white;
    border-radius:5px;
}
.systemNotification-body {
    margin-top: 10px;
    margin-left: 205px;
    width: 800px;
    background-color: white;
    border-radius:5px;
}
.systemNotification-body-content {
    height: 100px;
}
.systemNotification-body-content .title {
    display:block;
    height: 30px;
    font-weight: 700;
    font-size: 13px;
    line-height: 30px;
}
.systemNotification-body-content .time {
    display:block;
    font-size: 12px;
    color: #A1A1A1;
}
.systemNotification-body-content .content {
    display:inline-block;
    height: 40px;
    font-size: 13px;
}
</style>
